<template>
  <div class="seller">
    <div class="seller-reco">
      <div class="reco-top">
        <h3>{{sellerData.name}}</h3>
        <p>
          <van-rate v-model="sellerData.score" readonly void-icon="star" :size="20" color="#ff9a04" void-color="#eee" allow-half />
          <span>（661）</span>
          <span>月售{{sellerData.sellCount}}单</span>
        </p>
        <div class="collect">
          <van-icon name="like" color="#ff3300" size="18px" /><br>
          <span>已收藏</span>
        </div>
      </div>
      <ul class="reco-bottom">
        <li>
          <h5>起送价</h5>
          <p><span>{{sellerData.minPrice}}</span> 元</p>
        </li>
        <li>
          <h5>商家配送</h5>
          <p><span>{{sellerData.deliveryPrice}}</span> 元</p>
        </li>
        <li>
          <h5>平均配送时间</h5>
          <p><span>{{sellerData.deliveryTime}}</span> 分钟</p>
        </li>
      </ul>
    </div>
    <div class="seller-cont">
      <div class="cont-top">
        <h3>活动公告</h3>
        <p>{{sellerData.bulletin}}</p>
      </div>
      <ul class="cont-bottom">
        <li v-for="(item,index) in sellerData.supports" :key="index">
          {{item}}
        </li>
      </ul>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getSeller_api } from "@/apis/seller.js";
@Component({})
export default class extends Vue {
  sellerData = {};
  async created() {
    let res = await getSeller_api();
    // console.log(res.data.data);
    this.sellerData = res.data.data;
  }
}
</script>

<style lang="scss" scoped>
.seller {
  background-color: #f4f5f7;
}
.seller-reco {
  padding: 0 15px;
  background-color: #fff;
  margin-bottom: 20px;
  .reco-top {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #ecedef;
    h3 {
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      color: #666666;
    }
    .collect {
      position: absolute;
      top: 25%;
      right: 8%;
      text-align: center;
      color: #666666;
      font-size: 14px;
      line-height: 20px;
    }
  }
  .reco-bottom {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    li {
      text-align: center;
    }
    h5 {
      color: #a0a0a0;
      font-weight: normal;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      color: #666666;
      span {
        font-size: 20px;
        font-weight: bold;
        color: #000;
      }
    }
  }
}
.seller-cont {
  background-color: #fff;
  padding: 0 15px;
  .cont-top {
    border-bottom: 1px solid #ecedef;
    padding-bottom: 10px;
    h3 {
      line-height: 50px;
    }
    p {
      color: #ff3200;
      line-height: 24px;
    }
  }
  .cont-bottom {
    li {
      margin: 20px 0;
    }
  }
}
</style>